<template>
  <div>
    <el-container>
        <el-main>
            <el-card style="margin: 10px; min-height: 600px;">
                <el-descriptions title="配置详情" :column="1">
                    <template slot="extra">
                        <el-button type="info" icon="el-icon-back" @click="back()">返回</el-button>
                    </template>
                    <el-descriptions-item label="路由规则">{{routeData.routeRule.routeRuleName}}</el-descriptions-item>
                    <el-descriptions-item label="规则细项" style="background-color: #f5f5f5;">
                        <el-row style="width: 100%">
                            <el-col :span="24" v-for="(item, i) in routeData.routeRuleItems" :key="i" style="padding-bottom: 5px;">
                                <el-card body-style="background-color: #f5f5f5;" style=" width: 100%;" >
                                    <el-row :gutter="12">
                                        <el-form :model="item" label-width="130px" size="mini">
                                        <el-col :span="24" style="text-align: right;">
                                            <el-button type="text" @click="updateItem(item, i)">编辑</el-button>
                                            <el-button type="text" style="color: #F56C6C" @click="removeItem(i)">删除</el-button>  
                                        </el-col>
  
                                        <el-col :span="12">调用方：
                                            <el-card style="height: 140px;">
                                                <el-form :model="item" label-width="130px" size="mini">
                                                    <el-descriptions title="" :column="1">
                                                        <el-descriptions-item label="应用名称">{{ item.callerAppId }}</el-descriptions-item>
                                                        <el-descriptions-item label="匹配规则">
                                                            <table style="width: 100%;">
                                                                <thead style="background: #F2F6FC; line-height: 25px;">
                                                                    <tr>
                                                                        <th>匹配类型</th>
                                                                        <th>匹配键</th>
                                                                        <th>匹配值</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr>
                                                                        <td>{{ item.ruleType }}</td>
                                                                        <td>{{ item.callerKey }}</td>
                                                                        <td>{{ item.callerValue }}</td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </el-descriptions-item>
                                                        
                                                        <el-descriptions-item label="流量比重"><el-progress :percentage="item.weight" color="#67C23A" style="width: 200px;"></el-progress></el-descriptions-item>
                                                    </el-descriptions>
                                                </el-form>   
                                            </el-card>
                                        </el-col>
                                        <el-col :span="12">被调方：
                                            <el-card style="height: 140px;">
                                                <el-descriptions title="" :column="1">
                                                    <el-descriptions-item label="应用名称">{{ item.calleeAppId }}</el-descriptions-item>
                                                    <el-descriptions-item label="匹配规则">
                                                        <table style="width: 100%;">
                                                            <thead style="background: #F2F6FC; line-height: 25px;">
                                                                <tr>
                                                                    <th>标签键</th>
                                                                    <th>标签值</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <td>{{ item.calleeLabel }}</td>
                                                                    <td>{{ item.calleeLabelValue }}</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </el-descriptions-item>
                                                </el-descriptions>
                                            </el-card>
                                        </el-col>
                                        </el-form>
                                    </el-row>    
                                </el-card>
                            </el-col>
                        </el-row>
                    </el-descriptions-item>
                </el-descriptions>
                <div style="width: 100%; text-align: center; margin-top: 10px; margin-bottom: 30px;">
                    <el-button type="success" round @click="addItem()">新增规则</el-button>
                    <el-button type="primary" round @click="submit()">保存设置</el-button>
                </div>
            </el-card>
        </el-main>
    </el-container>

    <add-update-item ref="AddUpdateItem" @success="success"></add-update-item>
  </div>
</template>

<script>
import RuleTypeSelect from './modules/rule_type_select.vue'
import AddUpdateItem from './modules/add_update_item.vue'

export default {
    components: {
        RuleTypeSelect,
        AddUpdateItem
    },
    data() {
        return {
            // 查询表单
            searchForm: {
                configGroupId: null,
                configId: null,
                searchText: ''
            },
            currentRoute: {
                id: null,
                routeRuleName: ''
            },
            routeData: {
                routeRule: {},
                routeRuleItems: []
            },
            loading: false
        }
    },
    created() {
        this.currentRoute.id = this.$route.query.routeId
        this.currentRoute.routeRuleName = this.$route.query.routeRuleName
    },
    mounted() {
        this.getById()
    },
    watch: {
       
    },
    methods: {
        /**
         * @title 获取列表
         */
        async getById() {
            this.loading = true
            const routeId = this.$route.query.routeId
            try {
                let response = await this.$API.route.getById(routeId)   
                this.routeData = response.data
            } finally{
                this.loading = false
            }
        },

        async submit() {
            let response = await this.$API.route.update(this.routeData)
            this.$message.success(response.message)
            this.getById()
        },

        addItem() {
            this.$nextTick(() => {
                this.$refs.AddUpdateItem.open({
                    "callerAppId": "*",
                    "calleeAppId": "*",
                    "calleeLabel": "gk-route-rule",
                    "weight": 100
                }, null) 
            })
        },

        updateItem(item, index) {
            this.$nextTick(() => {
                this.$refs.AddUpdateItem.open(item, index) 
            })
        },

        removeItem(index) {
            this.routeData.routeRuleItems.splice(index, 1)   
        },

        success(row, index) {
            if (row != null && row != 'Undefined') {
                if (index != null) {
                    this.routeData.routeRuleItems.splice(index, 1, JSON.parse(row))        
                } else {
                    this.routeData.routeRuleItems.push(JSON.parse(row))        
                }
            }
        },

        back() {
            this.$router.back(-1)
        },
    }
}
</script>

<style lang="scss" scoped>
.el-main {
    width: 100%;
    height: 100%;
    padding: 0;
}
</style>

<style lang="scss">
body > .el-container {
    margin-bottom: 40px;
    height: 100%;
}

body html{
    height: 100%;
}
</style>
